<template>
    <div class="list-container">
    <ul v-if="yhqlist.length">
        <li v-for="(item,index) in yhqlist" :key="index">
            <div class="coupon-detail" :class="'coupon-state-' + couponstate">
                <div class="overdue" v-if="item.overduetime <= 7 && couponstate === '2'"></div>
                <div class="clearfix">
                    <div class="left">
                        <p class="money" v-if="item.couponKind === 1">
                            <i>￥</i>
                            <span class="integermoney">{{item.formatCouponValue.integermoney}}</span>
                            <span class="decimalmoney">{{item.formatCouponValue.decimalmoney}}</span>
                        </p>
                        <p class="money rate" v-if="item.couponKind === 2">
                            <i>+</i>
                            <span class="integermoney">{{(item.subsidyRate * 100).toFixed(2)}}</span>
                            <span class="decimalmoney">%</span>
                        </p>
                        <p class="coupontype">{{item.couponKind === 1 ? '抵扣券' : '加息券'}}</p>
                    </div>
                    <div class="right">
                        <p class="time">有效期至{{item.expiredDate}}</p>
                        <p class="limitmoney" v-if="item.minPayment !== '0'">满{{item.minPayment}}元可用</p>
                        <p class="limitdetail" v-if="item.limittime">{{item.limittime + item.limittypes}}</p>
                    </div>
                </div>
                <p class="cut-off-rule"><i class="left-circular"></i><i class="right-circular"></i></p>
                <p class="bottomdetail clearfix">
                    <span class="releasetime">{{item.activateDate + '发放'}}</span>
                    <span class="explain">{{item.couponName}}</span>
                </p>
                <p class="hasused-detail" v-if="couponstate === '3'">
                    <span class="usedtime">{{'使用时间' + item.usageTime}}</span>
                    <span class="purpose">{{item.usageComments}}</span>
                </p>
            </div>
        </li>
    </ul>
    <div class="isloding" v-else-if="isLoading">
        <mt-spinner :type="3" :size="30"></mt-spinner>
    </div>
    <div class="hasnothing" v-else>
        <img src="~/assets/img/nothing.png" />
        <p class="hasnothing-tips">暂无优惠券</p>
    </div>
    </div>
</template>
<script>
  import formatMoney from '~/helper/formatMoney.js'
  import moment from 'moment'
  import conv from '~/helper/conv'

  export default {
    name: 'yhq-coupon-list',
    props: {
      list: {
        type: Array,
        default: () => []
      },
      isLoading: {
        type: Boolean
      },
      couponstate: {
        type: String
      },
      productTypeDtos: {
        type: Array,
        default: () => []
      }
    },
    computed: {
      yhqlist () {
        var items = this.list
        var a = moment().format('YYYY-MM-DD')
        items.forEach(item => {
          item.formatCouponValue = {
            integermoney: parseInt(item.couponValue / 100),
            decimalmoney: '.' + ((item.couponValue % 100) < 10 ? '0' : '') + (item.couponValue % 100)
          }
          item.minPayment = formatMoney.formatCount(parseInt(item.minPayment / 100))
          item.limittime = Number(item.minProductMaturity) ? '限' + item.minProductMaturity + '天及以上' : ''
          item.limittypes = this.getProductType(item.productTypes)
          item.usageTime = (item.usageTime) ? conv.toDateStr(item.usageTime, 'yyyy-MM-dd') : ''
          var b = moment(item.expiredDate)
          item.overduetime = b.diff(a, 'days')
        })
        return items
      }
    },
    methods: {
      getProductType (items) {
        var productList = []
        for (var i = 0; i < items.length; i++) {
          var productEach = this.productTypeDtos.filter((name) => {
            return items[i] === name.id
          })
          if (productEach.length > 0) {
            productList.push(productEach[0].productTypeName)
          }
        }
        if (productList.length > 0) {
          return productList.join(',')
        } else {
          return '产品'
        }
      }
    }
  }
</script>

<style scoped lang='sass' src='~/assets/sass/coupon.sass'></style>